<template>
  <div class="page page-dog">
    <!-- 背景 -->
    <div class="container-bg"><img src="@/assets/bg_open_dog.jpg" class="bg"></div>
    <!-- 按钮组 -->
    <div class="container-btn-group">
      <!-- <div class="container-btn" @click="routerLink('dogLady', 0)"><img src="@/assets/btn_lady.png" class="btn"></div> -->
      <!-- <div class="container-btn" @click="routerLink('dogMan', 1)"><img src="@/assets/btn_man.png" class="btn"></div> -->
      <div class="container-btn" @click="routerLink('dog2', 0)"><img src="@/assets/btn_lady.png" class="btn"></div>
      <div class="container-btn" @click="routerLink('dog2', 1)"><img src="@/assets/btn_man.png" class="btn"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    routerLink(router, params) {
      this.$router.goTo(this, router, { sex: params })
    }
  }
}
</script>

<style lang="less">
.page-dog {
  .container-btn-group {
    width: 56%;
    height: calc(30vw + 3px);
    position: absolute;
    top: calc(107vw - 1px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid transparent;
  }
}
</style>
